<template>
  <div id="user">
    <seachbox @toHandleCloseButton="toggleSeachBox" :cardHeight="seachBoxHeight"></seachbox>
    <navbar :activeIndex="navbarActiveIndex" @toHandleToggleButton="toggleSeachBox"></navbar>
    <bannerimage :images="bannerImages"></bannerimage>
    <div class="container">
      <router-view name="IndexContainer"></router-view>
      <router-view name="ProductcenterContainer"></router-view>
      <router-view name="Product"></router-view>
    </div>
  </div>
</template>

<script>
import SeachBox from '../components/USER/common/SearchBox'
import Navbar from '../components/USER/common/Navbar'
import BannerImage from '../components/USER/common/BannerImage'
export default {
  data() {
    return {
      seachBoxHeight: 0,
      navbarActiveIndex: '1',
      bannerImages: [
        'http://www.chinaserver.cn/db_picture/news13/201807230942125570.jpg',
        'http://www.chinaserver.cn/db_picture/news13/201811140251485810.jpg',
        'http://www.chinaserver.cn/db_picture/news13/201904040943058200.jpg',
        'http://www.chinaserver.cn/db_picture/news13/202001160804327990.jpg'
      ]
    }
  },
  methods: {
    init() {
      switch (this.$route.name) {
        case 'index':
          this.navbarActiveIndex = '1'
          this.bannerImages = [
            'http://www.chinaserver.cn/db_picture/news13/201807230942125570.jpg',
            'http://www.chinaserver.cn/db_picture/news13/201811140251485810.jpg',
            'http://www.chinaserver.cn/db_picture/news13/201904040943058200.jpg',
            'http://www.chinaserver.cn/db_picture/news13/202001160804327990.jpg'
          ]
          break
        case 'productcenter':
          this.navbarActiveIndex = '2-1'
          this.bannerImages = [
            'http://www.chinaserver.cn/db_picture/news13/201707100733109410.jpg'
          ]
          break
        case 'product':
          this.navbarActiveIndex = '2-1'
          this.bannerImages = [
            'http://www.chinaserver.cn/db_picture/news13/201707100733109410.jpg'
          ]
          break
      }
    },
    toggleSeachBox() {
      this.seachBoxHeight === 0
        ? (this.seachBoxHeight = 80)
        : (this.seachBoxHeight = 0)
    }
  },
  components: { navbar: Navbar, seachbox: SeachBox, bannerimage: BannerImage },
  watch: {
    // 通过路由名称的改变切换navbar的标签页索引
    $route: function() {
      this.init()
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="less" scope>
#user {
  .container {
  }
}
html,
body {
  min-width: 768px;
}
</style>
